<!-- #layout name=default -->
<style type="text/css">
    .thumbnail {
        width: 100%;
        height: 148px;
        overflow: hidden;
        padding: 0;
    }
</style>
<div id="main" class="with-button">
    <div class="page-header">
        <h1 class="title">Edit image</h1>
    </div>
    <div class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-md-2">File name</label>
            <div class="col-md-10">
                <p data-bind="text: filename" class="form-control-static"></p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">URL</label>
            <div class="col-md-10">
                <p class="form-control-static">
                    <a target="_blank" data-bind="text: linkText, attr: { href: link }"></a>
                </p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">Alt text</label>
            <div class="col-md-10">
                <input type="text" data-bind="value: altText" class="form-control input-xlarge">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-2">Image</label>
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-12">
                                <img alt="" data-bind="attr: { src: src }" class="img-responsive" id="editable-img">
                            </div>
                        </div>
                        <button data-bind="visible: !imageEditing(), click: toggleMode" class="btn green margin-top-10">Edit</button>
                    </div>
                    <div data-bind="visible: imageEditing" class="col-md-4">
                        <div class="col-md-12">
                            <div class="thumbnail margin-bottom-10"></div>
                            <div class="margin-bottom-10">
                                <button data-bind="click: saveEditing" class="btn green">Crop</button>
                                <button data-bind="click: toggleMode" class="btn btn-default">Exit</button>
                            </div>
                            <div class="btn-group btn-group-justified margin-bottom-10">
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'zoom', value: 0.1 }), tooltip: Kooboo.text.tooltip.image.zoomIn" class="btn btn-default"><i class="fa fa-search-plus"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'zoom', value: -0.1 }), tooltip: Kooboo.text.tooltip.image.zoomOut" class="btn btn-default"><i class="fa fa-search-minus"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'move', value: [-10, 0] }), tooltip: Kooboo.text.tooltip.image.moveLeft" class="btn btn-default"><i class="fa fa-arrow-left"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'move', value: [10, 0] }), tooltip: Kooboo.text.tooltip.image.moveRight" class="btn btn-default"><i class="fa fa-arrow-right"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'move', value: [0, -10] }), tooltip: Kooboo.text.tooltip.moveUp" class="btn btn-default"><i class="fa fa-arrow-up"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'move', value: [0, 10] }), tooltip: Kooboo.text.tooltip.moveDown" class="btn btn-default"><i class="fa fa-arrow-down"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'rotate', value: -90 }), tooltip: Kooboo.text.tooltip.image.rotateLeft" class="btn btn-default"><i class="fa fa-rotate-left"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'rotate', value: 90 }), tooltip: Kooboo.text.tooltip.image.rotateRight" class="btn btn-default"><i class="fa fa-rotate-right"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'scaleX' }), tooltip: Kooboo.text.tooltip.image.horizontalFlip" class="btn btn-default"><i class="fa fa-arrows-h"></i></a>
                                <a href="javascript:;" data-bind="click: actionClick.bind(this, { name: 'scaleY' }), tooltip: Kooboo.text.tooltip.image.verticalFlip" class="btn btn-default"><i class="fa fa-arrows-v"></i></a>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Ratio</label>
                                <div class="col-md-9">
                                    <div class="btn-group" data-toggle="buttons" data-bind="foreach: aspectRatioArray">
                                        <label class="btn btn-default" data-bind="click: $parent.changeRatio.bind(this), css: { active: $parent.aspectRatio() == ratio }">
                                            <input type="radio" class="toggle"name="aspectRatio" data-bind="checked: $parent.aspectRatio, value: ratio"> 
                                            <!--ko text: text-->
                                            <!--/ko-->
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Width</label>
                                <div class="col-md-9">
                                    <div class="input-group bootstrap-touchspin">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default bootstrap-touchspin-down" type="button" data-bind="click: attrAction.bind(this, { name: 'width', op: '-' })">-</button>
                                        </span>
                                        <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
                                        <input type="text" data-bind="value: width" id="dataWidth" class="form-control text-right">
                                        <span class="input-group-addon bootstrap-touchspin-postfix">px</span>
                                        <span class="input-group-btn">
                                            <button class="btn btn-default bootstrap-touchspin-up" type="button" data-bind="click: attrAction.bind(this,  { name: 'width', op: '+' })">+</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Height</label>
                                <div class="col-md-9">
                                    <div class="input-group bootstrap-touchspin">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default bootstrap-touchspin-down" type="button" data-bind="click: attrAction.bind(this, { name: 'height', op: '-' })">-</button>
                                        </span>
                                        <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
                                        <input type="text" data-bind="value: height" id="dataWidth" class="form-control text-right">
                                        <span class="input-group-addon bootstrap-touchspin-postfix">px</span>
                                        <span class="input-group-btn">
                                            <button class="btn btn-default bootstrap-touchspin-up" type="button" data-bind="click: attrAction.bind(this, { name: 'height', op: '+' })">+</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-md-3">Rotate</label>
                                <div class="col-md-9">
                                    <div class="input-group bootstrap-touchspin">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default bootstrap-touchspin-down" type="button" data-bind="click: attrAction.bind(this, { name: 'rotate', op: '-' })">-</button>
                                        </span>
                                        <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
                                        <input type="text" data-bind="value: rotate" id="dataWidth" class="form-control text-right">
                                        <span class="input-group-addon bootstrap-touchspin-postfix">degree</span>
                                        <span class="input-group-btn">
                                            <button class="btn btn-default bootstrap-touchspin-up" type="button" data-bind="click: attrAction.bind(this, { name: 'rotate', op: '+' })">+</button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-buttons">
        <a href="javascript:;" class="btn green" data-bind="click: submitEdit, css: { disabled: imageEditing }, attr: { disabled: imageEditing }">Save</a>
        <a href="javascript:;" data-bind="click: userCancel" class="btn gray">Cancel</a>
    </div>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/lib/cropper/cropper.min.js"
        ]);

        Kooboo.loadCSS([
            "/_Admin/Scripts/lib/cropper/cropper.min.css"
        ])
    })()
</script>
<script src="/_Admin/View/Contents/EditImage.js"></script>